

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
    <style>
       .box{
        height: 500px;
        width: 500px;
        line-height: 500px;
        background-color: #ccc;
        color: #fff;
        font-size: 100px;
        text-align: center;
       }

    </style>
</head>
<body>
    
    <div class="box"></div>
    <script>
        // 定义: 单位时间内，频繁触发事件，只执行最后一次。
        // 在事件被触发n秒后在执行回调,如果在这n秒内又被重新触发,则重新计时

        // 手写防抖函数
        //利用setTimeout延时器实现：
        // ①：声明一个定时器变量 
        // ②:  当鼠标每次滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器
        // ③：如果没有定时器则开启定时器，记得存到变量里面
        // ④：在定时器里面调用要执行的函数


        let box = document.querySelector(".box")

        let i = 1;
        function mouseMove() {
            box.innerHTML = i++;
        }

        // 防抖函数
        function debounce(fn,t) {
            let timer;
            // return 返回一个匿名函数
            return function () {
                // 2.3.4.
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn()
                }, t);
            }
        }


        box.addEventListener("mousemove",debounce(mouseMove,1000))





    </script>
</body>
</html>